<!--
 * @Author: your name
 * @Date: 2020-12-31 14:59:41
 * @LastEditTime: 2020-12-31 15:11:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\v-other.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>Components父子组件关系</h1>
    <hr>
    <span>在实际的开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这个时候就需要一个父子组件的关系</span>
    <jspang></jspang>
</div>
<script>
    //在外部定义子组件
    var city = {
        template: `<div>Sichuan of China</div>`
    }

    var jspang = {
        template:`<div>Panda from China!--<city></city></div>`,
        components: {
            "city" : city
        }
    };
    let app = new Vue({
        el : '#app',
        data:{

        },
        components:{
            "jspang" : jspang
        }
    });
</script>
</body>
</html>